<template>
  <div class="main">
    <div
      class="btn-collapsed"
      :style="{
        width: collapsed ? '80px' : '260px',
        padding: collapsed ? '0px 28px' : '0 16px 0 24px',
      }"
    >
      <li>
        <span v-if="!collapsed">{{ roles.pcdocument[0].meta }}</span>
        <MenuUnfoldOutlined v-if="collapsed" @click="collapsedClick" />
        <MenuFoldOutlined v-else @click="collapsedClick" />
      </li>
    </div>
    <a-menu
      v-model:selectedKeys="defaultSelectedKeys"
      theme="Dark"
      :inline-collapsed="collapsed"
      v-model:openKeys="openKeys"
      @click="handleClick"
      mode="inline"
      :style="{ height: 'calc(100% - 52px)', borderRight: 0 }"
    >
      <div v-for="item in roles.pcdocument[0].children" :key="item.paths">
        <sub-menu
          :menu-info="item"
          v-if="item.children && item.children[0].meta.resType != 'button'"
        />
        <a-menu-item :key="item.path" v-else>
          <template #icon>
            <span class="anticon iconBg"
              ><i :class="['iconfont', item.meta.resIconKind]"></i
            ></span>
          </template>
          <span :component="item.component">{{ item.meta }}</span>
        </a-menu-item>
      </div>
    </a-menu>
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  reactive,
  defineEmits,
  watchEffect,
  defineAsyncComponent,
} from "vue";
import SubMenu from "./menuItem.vue";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons-vue";
import roles from "@/router/js/data";
console.log(roles);
const emits = defineEmits<{
  (e: "menuClick", val: any, keys: any): void;
}>();
const state = reactive({
  collapsed: false,
  preOpenKeys: ["sub1"],
});
const propsData = defineProps<{
  tabdata: any;
}>();
const tabdatas: any = ref([]);
watchEffect(() => {
  tabdatas.value = propsData.tabdata;
});

let collapsed = ref(false);
// 展开的父菜单项
const openKeys = ref<string[]>(["/"]);
const defaultSelectedKeys = ref<string[]>(["table"]);
// const defaultSelectedKeys = ref<string[]>([
//   "/collaborativeWork/collaborativeManagement/urbanManagementBureau",
// ]);
// type menuType = {
//   path: string;
//   paths: string;
//   name: string;
//   redirect: string;
//   meta: {
//     resName: string;
//     resCheckIcon: string;
//     resRange: string;
//     resIconKind: string;
//     resType: string;
//     resIcon: string;
//   };
//   children?: menuType[];
// };

// const info = ref<menuType[]>([
//   {
//     path: "/collaborativeWork",
//     paths: "/collaborativeWork",
//     name: "协同工作/collaborativeWork",
//     redirect: "collaborativeWork/collaborativeManagement/urbanManagementBureau",
//     meta: {
//       resName: "协同工作",
//       resCheckIcon: "",
//       resRange: "",
//       resIconKind: "",
//       resType: "menu",
//       resIcon: "",
//     },
//     children: [
//       {
//         path: "collaborativeManagement",
//         paths: "/collaborativeWork/collaborativeManagement",
//         name: "重点工作协同管理collaborativeManagement",
//         redirect: "",
//         meta: {
//           resName: "重点工作协同管理",
//           resCheckIcon: "",
//           resRange: "1",
//           resIconKind: "icon-jingfeishiyong",
//           resType: "menu",
//           resIcon: "",
//         },
//         children: [
//           {
//             path: "urbanManagementBureau",
//             paths:
//               "/collaborativeWork/collaborativeManagement/urbanManagementBureau",
//             name: "重点工作管理（城管局）urbanManagementBureau",
//             redirect: "",
//             meta: {
//               resName: "重点工作管理（城管局）",
//               resCheckIcon: "",
//               resRange: "1",
//               resIconKind: "icon-quan",
//               resType: "",
//               resIcon: "",
//             },
//           },
//           {
//             path: "entrustedUnit",
//             paths: "/collaborativeWork/collaborativeManagement/entrustedUnit",
//             name: "重点工作管理（同级委办单位）entrustedUnit",
//             redirect: "",
//             meta: {
//               resName: "重点工作管理（同级委办单位）",
//               resCheckIcon: "",
//               resRange: "1",
//               resIconKind: "icon-quan",
//               resType: "",
//               resIcon: "",
//             },
//           },
//           {
//             path: "disposalSubmission",
//             paths:
//               "/collaborativeWork/collaborativeManagement/disposalSubmission",
//             name: "重点工作处置报送disposalSubmission",
//             redirect: "",
//             meta: {
//               resName: "重点工作处置报送",
//               resCheckIcon: "",
//               resRange: "1",
//               resIconKind: "icon-quan",
//               resType: "",
//               resIcon: "",
//             },
//           },
//         ],
//       },
//       {
//         path: "taskDistribution",
//         paths: "/collaborativeWork/taskDistribution",
//         name: "任务管理（派发人员）taskDistribution",
//         redirect: "",
//         meta: {
//           resName: "任务管理（派发人员）",
//           resCheckIcon: "",
//           resRange: "1",
//           resIconKind: "icon-faxiangongdan",
//           resType: "",
//           resIcon: "",
//         },
//         children: [
//           {
//             path: "distributionPersonnel",
//             paths: "/collaborativeWork/taskDistribution/distributionPersonnel",
//             name: "任务生成distributionPersonnel",
//             redirect: "",
//             meta: {
//               resName: "任务生成",
//               resCheckIcon: "",
//               resRange: "1",
//               resIconKind: "",
//               resType: "button",
//               resIcon: "",
//             },
//           },
//           {
//             path: "superviseHandle",
//             paths: "/collaborativeWork/taskDistribution/superviseHandle",
//             name: "任务督办superviseHandle",
//             redirect: "",
//             meta: {
//               resName: "任务督办",
//               resCheckIcon: "",
//               resRange: "1",
//               resIconKind: "",
//               resType: "button",
//               resIcon: "",
//             },
//           },
//         ],
//       },
//       {
//         path: "taskReceive",
//         paths: "/collaborativeWork/taskReceive",
//         name: "任务管理（接收人员）taskReceive",
//         redirect: "",
//         meta: {
//           resName: "任务管理（接收人员）",
//           resCheckIcon: "",
//           resRange: "1",
//           resIconKind: "icon-faxiangongdan",
//           resType: "",
//           resIcon: "",
//         },
//       },
//       {
//         path: "statisticalReport",
//         paths: "/collaborativeWork/statisticalReport",
//         name: " 统计报表statisticalReport",
//         redirect: "",
//         meta: {
//           resName: " 统计报表",
//           resCheckIcon: "",
//           resRange: "1",
//           resIconKind: "icon-faxiangongdan",
//           resType: "",
//           resIcon: "",
//         },
//       },
//     ],
//   },
// ]);

const collapsedClick = () => {
  collapsed.value = !collapsed.value;
};
// type ItemType = {
//   key: string;
//   keyPath: string;
// };
const getChild = (data: any, path: any) => {
  for (let i = 0; i < data.length; i++) {
    let child = data[i];
    if (child.path == path) {
      return child.path;
    } else {
      if (child.children && child.children.length > 0) {
        getChild(child.children, path);
      }
    }
  }
};
const handleClick = (e: any) => {
  let objs: any;
  for (let i = 0; i < roles.pcdocument[0].children.length; i++) {
    let child = roles.pcdocument[0].children[i];
    if (child.path == e.key) {
      objs = child;
    } else {
      if (child.children && child.children.length > 0) {
        objs = getChild(child.children, e.key);
      }
    }
  }
  console.log(objs);

  // let url =
  // e.domEvent.target.lastElementChild == null
  //   ? import.meta.env.VITE_APP_BACK +
  //   "/src/views/" +
  //   e.domEvent.target.getAttribute("component")
  //   : import.meta.env.VITE_APP_BACK +
  //   "/src/views/" +
  //   e.domEvent.target.lastElementChild.getAttribute("component");

  // if (e.domEvent.srcElement.children[0].getAttribute("component")) {
  tabdatas.value.push({
    title: e.domEvent.target.textContent,
    content: defineAsyncComponent({
      loader: () => objs.components,
    }),
    key: e.key,
  });
  let newArr = [];
  for (let i = 0; i < tabdatas.value.length; i++) {
    if (newArr.indexOf(tabdatas.value[i].key) == -1) {
      newArr.push(tabdatas.value[i].key);
    } else {
      tabdatas.value.splice(i, 1);
      i--;
    }
  }
  emits("menuClick", tabdatas.value, e.key);
};
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
}

.btn-collapsed {
  width: 100%;
  height: 52px;
  font-size: 16px;
  padding: 0 16px 0 24px;
  background-color: #fff;

  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    color: rgba(0, 0, 0, 0.85);

    .anticon-menu-fold,
    .anticon-menu-unfold {
      cursor: pointer;
    }
  }
}

ul.ant-menu.ant-menu-root {
  width: 260px;
}

.ant-menu-inline-collapsed {
  width: 80px !important;
}

::v-deep .ant-menu-inline-collapsed .ant-menu-item {
  inset-inline-start: 0 !important;
  padding-inline: calc(50% - 12px) !important;
  text-overflow: clip !important;

  .ant-menu-title-content,
  .ant-menu-title-content i,
  .ant-menu-submenu-arrow {
    opacity: 0 !important;
  }
}

::v-deep
  .ant-menu-inline-collapsed
  .ant-menu-submenu
  > .ant-menu-submenu-title {
  inset-inline-start: 0 !important;
  padding-inline: calc(50% - 12px) !important;
  text-overflow: clip !important;

  .ant-menu-title-content,
  .ant-menu-title-content i,
  .ant-menu-submenu-arrow {
    opacity: 0 !important;
  }
}

::v-deep .iconfont {
  font-size: 18px;
}

@mixin color() {
  i,
  span {
    color: rgba(22, 119, 255, 1);
  }
}

::v-deep .ant-menu-item:hover {
  color: #1677ff !important;
}

::v-deep.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: rgba(230, 244, 255, 1);
}

::v-deep .ant-menu-item,
::v-deep .ant-menu-submenu-title {
  height: 52px !important;
  line-height: 60px !important;
  margin-top: 0;
  margin-bottom: 0;
}

::v-deep .ant-menu {
  .ant-menu-item-selected {
    @include color();
  }
}

.btn-box-menu {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.85);
  padding: 0 16px 0 24px;
  font-size: 16px;

  .icon-btn {
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
  }
}

.anticon {
  color: rgba(0, 0, 0, 0.85);
  font-size: 18px;
}

::v-deep
  .ant-menu-root
  > div
  > div
  > .ant-menu-submenu
  > .ant-menu-submenu-title {
  //第一层
  .iconBg {
    display: inline-block;
    border-radius: 4px;
    text-align: center;
    line-height: 26px;
  }
}

::v-deep .ant-menu-root > div > .ant-menu-submenu > .ant-menu-sub > div > li {
  //第二层
  .iconBg {
    .iconfont {
      font-size: 10px;
      margin-top: 5px;
      display: inline-block;
    }
  }
}

::v-deep
  .ant-menu-root
  > div
  > .ant-menu-submenu
  > .ant-menu-sub
  > div
  > .ant-menu-submenu
  > .ant-menu-sub
  > div {
  li {
    .anticon {
      display: none;
    }
  }
}
</style>
